<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>live</title>
    <link rel="stylesheet" href="/dplayer/DPlayer.min.css">
</head>
<body>
<div style="width: 600px;height: 500px" id="dplayer"></div>
<script src="/dplayer/hls.min.js"></script>
<script src="/dplayer/DPlayer.min.js"></script>
<script>
    let ws;
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        danmaku: true,
        apiBackend: {
            read: function (options) {
                console.log('Pretend to connect WebSocket');
                console.log("read.....");
                ws = new WebSocket("http://swoole.phpdongyi.cn:9999");
                ws.onopen = function () {
                    console.log("connect success...");
                }
            },
            send: function (options) {
                console.log("send.....",options.data);
                ws.send(options.data.text);
            },
        },
        video: {
            url: 'rtmp://58.200.131.2:1935/livetv/cctv1',
            pic: '/dplayer/111.jpg',
            type: 'hls',
        },
    });

    ws.onmessage = function (evt) {
      console.log(evt.data);
        dp.danmaku.draw({
            text: evt.data,
            color: '#b7daff',
            type: 'right'
        });
    }
</script>
</body>
</html>